import React from 'react';
import { Card, Button, Typography, Steps, Space, Divider, List, Image, Tag } from 'antd';
import { ArrowLeftOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { createOrder } from '../services/mockOrderService';
import { OrderStatus } from '../types/order';

const { Title, Text } = Typography;
const { Step } = Steps;

// 订单状态映射
const orderStatusMap = {
  [OrderStatus.PENDING]: '待付款',
  [OrderStatus.PAID]: '已付款',
  [OrderStatus.SHIPPED]: '已发货',
  [OrderStatus.COMPLETED]: '已完成',
  [OrderStatus.CANCELLED]: '已取消'
};

// 订单状态颜色映射
const statusColorMap = {
  [OrderStatus.PENDING]: 'warning',
  [OrderStatus.PAID]: 'processing',
  [OrderStatus.SHIPPED]: 'success',
  [OrderStatus.COMPLETED]: 'success',
  [OrderStatus.CANCELLED]: 'error'
};

// 订单步骤映射
const orderStepMap = {
  [OrderStatus.PENDING]: 0,
  [OrderStatus.PAID]: 1,
  [OrderStatus.SHIPPED]: 2,
  [OrderStatus.COMPLETED]: 3,
  [OrderStatus.CANCELLED]: 0
};

// 订单步骤描述映射
const orderStepDescMap = {
  [OrderStatus.PENDING]: ['订单已提交', '待支付', '待发货', '待完成'],
  [OrderStatus.PAID]: ['订单已提交', '支付完成', '待发货', '待完成'],
  [OrderStatus.SHIPPED]: ['订单已提交', '支付完成', '已发货', '待完成'],
  [OrderStatus.COMPLETED]: ['订单已提交', '支付完成', '已发货', '交易成功'],
  [OrderStatus.CANCELLED]: ['订单已取消', '支付失败', '发货失败', '交易失败']
};

// 完成支付后，订单详情页

interface OrderDetailPageProps {
  isMobile: boolean;
  order: {
    items: Array<{
      id: string;
      name: string;
      price: number;
      quantity: number;
      image: string;
    }>;
    totalAmount: number;
    address?: {
      name: string;
      phone: string;
      province: string;
      city: string;
      district: string;
      detail: string;
    };
    paymentMethod?: string;
    id: string;
    createdAt: string;
    status: OrderStatus;
    statusText?: string;
  };
  onBackToHome: () => void;
  onBackToCart?: () => void;
  onBackToOrderList?: () => void;
}

export default function OrderDetailPage({ 
  isMobile, 
  order, 
  onBackToHome, 
  onBackToCart,
  onBackToOrderList
}: OrderDetailPageProps) {
  // 确认订单 
  const handleConfirmOrder = () => {
    
    onBackToHome();
  };

  return (
    <div style={{ padding: isMobile ? 16 : 24 }}>
      <Card bordered={false}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          {/* 订单状态 */}
          <div>
            <Steps
              current={orderStepMap[order.status]}
              size={isMobile ? "small" : "default"}
              items={[
                { title: '提交订单', description: orderStepDescMap[order.status][0] },
                { title: '支付订单', description: orderStepDescMap[order.status][1] },
                { title: '商品发货', description: orderStepDescMap[order.status][2] },
                { title: '交易完成', description: orderStepDescMap[order.status][3] }
              ]}
            />
          </div>

          {/* 订单信息 */}
          <div>
            <Title level={4}>订单信息</Title>
            <Card size="small" style={{ marginBottom: 16 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <Text type="secondary">订单号</Text>
                <Text strong>{order.id}</Text>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                <Text type="secondary">创建时间</Text>
                <Text>{order.createdAt ? new Date(order.createdAt).toLocaleString() : new Date().toLocaleString()}</Text>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Text type="secondary">订单状态</Text>
                <Tag color={statusColorMap[order.status]}>
                  {order.statusText || orderStatusMap[order.status]}
                </Tag>
              </div>
            </Card>
            <List
              itemLayout="horizontal"
              dataSource={order.items}
              locale={{ emptyText: null }}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Image width={80} src={`/images/${item.image}`} />}
                    title={item.name}
                    description={`数量: ${item.quantity}`}
                  />
                  <div>¥{item.price * item.quantity}</div>
                </List.Item>
              )}
            />
            <Divider />
            <div style={{ textAlign: 'right' }}>
              <Text strong>总计：</Text>
              <Text type="danger" style={{ fontSize: 20, marginLeft: 8 }}>
                ¥{order.totalAmount !== undefined ? order.totalAmount.toFixed(2) : '0.00'}
              </Text>
            </div>
          </div>

          {/* 收货地址 */}
          {order.address && (
            <div>
              <Title level={4}>收货地址</Title>
              <Card size="small">
                <Text>{order.address.name} {order.address.phone}</Text>
                <br />
                <Text>
                  {order.address.province} {order.address.city} {order.address.district} {order.address.detail}
                </Text>
              </Card>
            </div>
          )}

          {/* 支付方式 */}
          {order.paymentMethod && (
            <div>
              <Title level={4}>支付方式</Title>
              <Text>
                {order.paymentMethod === 'alipay' ? '支付宝' : 
                 order.paymentMethod === 'wechat' ? '微信支付' : 
                 order.paymentMethod === 'bank' ? '银行卡支付' : 
                 order.paymentMethod}
              </Text>
            </div>
          )}

          {/* 操作按钮 */}
          <div style={{ textAlign: 'center', marginTop: 24 }}>
            <Space>
              {onBackToOrderList && (
                <Button icon={<ArrowLeftOutlined />} onClick={onBackToOrderList}>
                  返回订单列表
                </Button>
              )}
              <Button 
                type="primary" 
                icon={<CheckCircleOutlined />}
                onClick={onBackToHome}
              >
                返回首页
              </Button>
            </Space>
          </div>
        </Space>
      </Card>
    </div>
  );
}